<!--
	各省（直辖市）历史地震
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="earthquake-historical">
		<!-- 侧边tab切换组件 -->
		<SideTab v-model:active="active" :list="list" @change="onChangeSideTab"></SideTab>
		<div class="btn-group">
			<div class="btn-expand" @click="onExpand">
				<!-- 展开 -->
			</div>
			<div class="btn-group-year">
				<span :class="{ active: btnActive == '0' }" @click="onHistory">历史</span>
				<el-divider direction="vertical" />
				<span :class="{ active: btnActive == '1' }" @click="onThisYear">今年</span>
			</div>
		</div>
		<!-- 数据表格 -->
		<div class="earthquake-historical-grid">
			<el-table :data="tableData" :border="true" style="width: 100%" max-height="320"
				:cell-style="{ border: '1px solid #475ADB' }"
				:header-cell-style="{ border: '1px solid #475ADB', borderLeft: 'none' }">
				<el-table-column header-align="center" align="center" label="省（直辖市）" prop="province" />
				<el-table-column header-align="center" align="center" label="数量" prop="earthquakeNum" />
			</el-table>
		</div>
	</div>
</template>

<script setup name="EarthquakeHistorical">
import { getCurrentInstance, ref } from 'vue';
// 侧边tab切换组件
import SideTab from '@/components/SideTab';
// 引入接口
import { getEarthquakeHistoricalApi } from '@/api/basicData'

// 当前实例对象
const { proxy } = getCurrentInstance();
// 组件事件监听
const emit = defineEmits(['change']);

// 按钮组切换
let btnActive = ref('0');
// 展开按钮事件监听
const onExpand = (e) => {
	proxy.$modal.msg('展开');
}
// 历史按钮事件监听
const onHistory = (e) => {
	btnActive.value = '0';
	// 加载数据
	getData();
}
// 今年按钮事件监听
const onThisYear = (e) => {
	btnActive.value = '1';
	// 加载数据
	getData();
}

// 当前tab
let active = ref('0');
// 类型列表
const list = [
	{ label: 'M < 4', value: '0' },
	{ label: '4 ≤ M < 5', value: '1' },
	{ label: '5 ≤ M < 6', value: '2' },
	{ label: '6 ≤ M < 7', value: '3' },
	{ label: '7 ≤ M < 8', value: '4' },
	{ label: 'M > 8', value: '5' },
];
// 侧边tab切换组件改变事件监听
const onChangeSideTab = (item) => {
	if (typeof item == 'string') {
		active.value = item;
		// 加载数据
		getData();
		// 修改当前类型
		emit('change', active.value);
	} else if (item.value) {
		active.value = item.value;
		// 加载数据
		getData();
		// 修改当前类型
		emit('change', active.value);
	}
}

// 表格数据
let tableData = ref([
	// { province: '北京市', earthquakeNum: 231 },
	// { province: '天津市', earthquakeNum: 220 },
	// { province: '河北省', earthquakeNum: 195 },
	// { province: '山西', earthquakeNum: 193 },
	// { province: '内蒙古自治区', earthquakeNum: 189 },
	// { province: '辽宁省', earthquakeNum: 184 },
	// { province: '吉林省', earthquakeNum: 176 },
	// { province: '黑龙江省', earthquakeNum: 172 },
	// { province: '上海市', earthquakeNum: 168 },
	// { province: '江苏省', earthquakeNum: 161 },
	// { province: '浙江省', earthquakeNum: 152 },
	// { province: '安徽省', earthquakeNum: 150 },
]);
// 加载数据
const getData = () => {
	if (active?.value) {
		tableData.value.length = 0;
		getEarthquakeHistoricalApi({
			// 震级
			category: Number(active.value),
			// 历史/今年
			time: btnActive.value,
		}).then(res => {
			const { code, data } = res;
			if (code == 200 && data) {
				tableData.value = [...data];
			}
		}).catch(err => {
			console.log(err.message);
		})
	}
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
// 定义抛出内容
defineExpose({ active, onChangeSideTab });
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.earthquake-historical {
	padding: 5px;
	color: $white;
	position: relative;

	// 按钮组
	.btn-group {
		position: absolute;
		top: -35px;
		right: 10px;
		font-size: 14px;
		text-align: right;
		color: #475ADB;

		.btn-expand {
			color: #46FFFF;
		}

		.btn-group-year {
			>span {
				cursor: pointer;
			}

			>span.active,
			>span:hover {
				color: #46FFFF;
			}
		}

		.el-divider {
			border-width: 2px;
			border-color: #475ADB;
			margin-top: -3px;
		}
	}

	.earthquake-historical-grid {
		width: 100%;
		padding: 10px;

		:deep(.el-table) {
			--el-table-border-color: #475ADB;
			--el-table-border: 1px solid #475ADB;
			--el-table-text-color: $white;
			--el-table-header-text-color: $white;
			--el-table-row-hover-bg-color: transparent;
			--el-table-current-row-bg-color: transparent;
			--el-table-header-bg-color: linear-gradient(#081043 0%, #0B1864 65%, #1D388F 100%);
			--el-table-bg-color: transparent;
			--el-table-tr-bg-color: transparent;

			// 表头
			.el-table__header-wrapper {
				font-size: 16px;

				.el-table__row {
					margin: 0;
					height: 35px;
					line-height: 35px;
				}
			}

			// 表格
			.el-table__body-wrapper {
				font-size: 14px;

				.el-table__body {
					-webkit-border-vertical-spacing: 0; // 垂直间距
				}

				.el-table__row {
					margin: 0;
					height: 23px;
					line-height: 23px;
				}
			}

			.el-table__cell {
				height: 100%;
			}
		}
	}
}
</style>